<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div class="box" v-if="showDiv">v3一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeYellow">蓝色</button>
    <div class="box" :style="`color:${fontColor}`">v3一个被控制字体颜色的div</div>
  </div>
</template>
<style scoped>
.box{width:200px;height: 200px;line-height:200px;background-color: cornflowerblue;text-align: center;}
</style>
<script>

import { useShow, useColor } from './useShowColor'

export default {
  name: 'App',
  setup() {
    // 功能一
    // const showDiv = ref(true)
    // function show() {
    //   showDiv.value = true
    // }
    // function hide() {
    //   showDiv.value = false
    // }
    // 组合使用
    const { showDiv, show, hide }  = useShow()
    
    // 功能二
    // const fontColor = ref('')
    // function changeRed() {
    //   fontColor.value = 'red'
    // }
    // function changeYellow() {
    //   fontColor.value = 'blue'
    // }

    const { fontColor, changeRed, changeYellow } = useColor()


    return { 
        showDiv, show, hide, 
        fontColor, changeRed, changeYellow
    }
  }
}
</script>